<template>
  <div id="app">
   <h1 v-html="title"></h1>
   <input type="text" v-model="newItem" @keyup.enter="addNew">
   <ul>
     <li v-for="item in items" :class="{finished:item.isFinited}" @click="toggleFinish(item)">{{item.label}}</li>
   </ul>
   <p>child tell me {{childwords}}</p>
   <com-aue :msgfromfather="msgfromfather" @tellme="lisenTome"></com-aue>
  </div>
</template>

<script>
import Store from './store';
import ComAue from './components/ComAue';

export default {
  data(){
    return {
      title: 'This <small>is</small> mine world',
      items: Store.fetch(),
      newItem:'',
      msgfromfather:{msg:'You Die!'},
      childwords:''
    }
  },
  methods:{
    toggleFinish:function(item){
      item.isFinited = !item.isFinited
    },
    addNew(){
      this.items.push({
        label: this.newItem,
        isFinited: false
      });
      this.newItem = '';
    },
    lisenTome(msg){
      this.childwords = msg
    }
  },
  watch:{
    items:{
      handler:function(to,from){
        Store.save(to);
      },
      deep:true
    }
  },
  components: { ComAue }
}
</script>

<style>
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

#app {
  color: #2c3e50;
  margin-top: -100px;
  max-width: 600px;
  font-family: Source Sans Pro, Helvetica, sans-serif;
  text-align: center;
}

#app a {
  color: #42b983;
  text-decoration: none;
}

.logo {
  width: 100px;
  height: 100px
}
.finished{
  text-decoration: underline;
}
</style>
